<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('电话工单退回审核')"/>
    <link th:href="@{/ajax/libs/bootstrap-switch/bootstrap-switch.min.css}" rel="stylesheet">
    <style>
        label {
            font-weight: bold;
        }

        @font-face {
            font-family: 'huawen';
            src: url("/fonts/huawen.woff2");
        }
        .smsnote {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            margin: 5px 0px 0px 15px;
        }
        .bootstrap-switch-mini {
            margin-top: 2px;
        }
    </style>
</head>
<body style="background-color: #F4F6FA;font-size: 13px;font-family:'huawen' ;font-weight: bold">
<div class="main-content" style="margin: 0;padding: 0">

    <form id="form-user-add" th:object="${workFormBase}" class="form-horizontal" style="background-color: #F4F6FA">
        <input type="hidden" name="fromTelA" th:field="*{fromTelA}">
        <input type="hidden" name="fromName" th:field="*{fromName}">
        <input type="hidden" id="pkId" name="pkId" th:value="${pkId}">
        <input type="hidden" id="wfId" name="wfId" th:value="${workFormBase.pkId}">
        <input type="hidden" id="sdeptName" name="sdeptName" th:value="${sendBackEty.sdeptName}">
        <input type="hidden" id="getDealPk" name="getDealPk" th:field="*{getDealPk}">
        <input type="hidden" name="myTwfNO" th:value="*{workFormNo}">
        <div class="col-sm-12 pb20">
            <div class="col-sm-12 grid-container" style="display: flex;">
                <!--工单基本信息-->
                <div class="col-sm-6 entering-page">
                    <div class="col-sm-12" style="display: flex;justify-content: space-between">
                        <div class="tltieBoder">
                            <div class="blueBorder"></div>
                            <h4 style="margin:0 0 0 10px">工单基本信息</h4>
                            <h4 style="margin:0 0 0 20px;cursor:pointer;color:blue;" onclick="operationSendBackRecord()">查看办理情况</h4>
                        </div>
                    </div>
                    <!--工单编号、工单性质-->
                    <div class="form-group col-sm-12">
                        <!--工单编号-->
                        <label class="col-sm-2 control-label entering-pd">工单编号：</label>
                        <div class="col-sm-4">
                            <span class="tworkformprocess-span">[[*{workFormNo}]]</span>
                        </div>
                        <!--工单性质-->
                        <label class="col-sm-2 control-label entering-pd">工单性质：</label>
                        <div class="col-sm-4">
                            <span class="tworkformprocess-span">[[*{setProName}]]</span>
                        </div>
                    </div>
                    <!--工单主题-->
                    
                    <!--    <label class="col-sm-3 control-label entering-pd">工单主题：</label>-->
                    <!--    <div class="col-sm-9">-->
                    <!--        <span class="tworkformprocess-span">[[*{wsTopic}]]</span>-->
                    <!--    </div>-->
                    <!--</div>-->
                    <!--交办次序、办理时限-->
                    <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label entering-pd">交办次序：</label>
                        <div class="col-sm-4">
                            <span class="tworkformprocess-span">[[${sendBackEty.seqName}]]</span>
                        </div>
                        <label class="col-sm-2 control-label entering-pd">办理时限：</label>
                        <div class="col-sm-4">
                            <span class="tworkformprocess-span">[[${#dates.format(sendBackEty.backLimit,'yyyy-MM-dd HH:mm:ss')}]]</span>
                        </div>
                    </div>
                    <!--承办单位-->
                    <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label  entering-pd">承办单位：</label>
                        <div class="col-sm-6">
                            <span class="tworkformprocess-span">[[${sendBackEty.sbdeptName}]]</span>
                        </div>
                    </div>
                    <!--办理性质、回复时间-->
                    <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label entering-pd">办理性质：</label>
                        <div class="col-sm-4">
                            <span class="tworkformprocess-span">[[${sendBackEty.sortName}]]</span>
                        </div>
                        <label class="col-sm-2 control-label entering-pd">回复时间：</label>
                        <div class="col-sm-4">
                            <span class="tworkformprocess-span">[[${#dates.format(sendBackEty.backTime,'yyyy-MM-dd HH:mm:ss')}]]</span>
                        </div>
                    </div>
                    <!--责任部门、联系电话-->
                    <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label entering-pd">责任部门：</label>
                        <div class="col-sm-4">
                            <span class="tworkformprocess-span">[[${sendBackEty.bdutyDept}]]</span>
                        </div>
                        <label class="col-sm-2 control-label entering-pd">联系电话：</label>
                        <div class="col-sm-4">
                            <span class="tworkformprocess-span">[[${sendBackEty.bdutyTel}]]</span>
                        </div>
                    </div>
                    <!-- 回复内容-->
                    <div class="form-group col-sm-12">
                        <label class="col-xs-2 control-label entering-pd">回复内容：</label>
                        <div class="col-xs-10">
                                    <textarea th:text="${sendBackEty.backDesc}" maxlength="3500" class="form-control workRemark"
                                              rows="3" readonly style="height: 100px"></textarea>
                        </div>
                    </div>
                    <!-- 工单备注-->
                    <div class="form-group col-sm-12">
                        <label class="col-xs-2 control-label entering-pd">退回理由：</label>
                        <div class="col-xs-10">
                                    <textarea th:text="${sendBackEty.backRemark}" maxlength="3500" class="form-control workRemark"
                                              rows="3" readonly style="height: 80px"></textarea>
                        </div>
                    </div>
                </div>
                <!--来电内容-->
                <div class="col-sm-6 entering-page">
                    <div class="col-sm-12 tltieBoder">
                        <div class="blueBorder"></div>
                        <h4 style="margin:0 0 0 10px">来电内容</h4>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-2 control-label entering-pd">来电主题：</label>
                            <div class="col-sm-10">
                                <span class="tworkformprocess-span">[[*{wsTopic}]]</span>
                            </div>
                        </div>
                    </div>
                    <!--详细地址-->
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-2 control-label  entering-pd">详细地址：</label>
                            <div class="col-sm-6">
                                <span class="tworkformprocess-span">[[*{fmAddress}]]</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-2 control-label entering-pd">通话内容：</label>
                            <div class="col-sm-10">
                                <!-- <span class="tworkformprocess-span">[[*{fmContent}]]</span> -->
                                <textarea  id="fmContent" th:text="*{fmContent}" maxlength="1000" class="form-control phoneRemark" readonly style="height: 260px">234</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12" style="margin-bottom: 10px">
                        <div class="form-group">
                            <label class="col-sm-2 control-label entering-pd">来电类别：</label>
                            <div class="col-sm-4">
                                <span class="tworkformprocess-span">[[*{dfmClaName}]]</span>
                            </div>
                            <label class="col-sm-2 control-label entering-pd">内容类别：</label>
                            <div class="col-sm-4">
                                <span class="tworkformprocess-span">[[*{dcntAname}]]</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--审查结论-->
            <div class="col-sm-12 grid-container" style="display: flex;">
                <div class="col-sm-12 entering-page">
                    <div class="col-sm-12 tltieBoder">
                        <div class="blueBorder"></div>
                        <h4 style="margin:0 0 0 10px">审查结论</h4>
                        <div class="col-sm-6 smsnote">
                            <h4 style="cursor:pointer;color:blue;" title="部门已开启/关闭所有工单驳回短信通知，可选择开启/关闭当前工单驳回短信通知">此工单是否已开启驳回短信通知：</h4>
                            <input type="checkbox" name="smsInform" th:checked="${smsInform} eq 1 ? true:false">
                            <input type="hidden" name="isOpenThis" th:value="${smsInform}">
                        </div>
                    </div>
                    <div class="form-group col-sm-12">
                        <label class="col-sm-3  control-label entering-pd" style="color: red">审查意见&nbsp;&nbsp;：</label>
                        <div class="col-sm-6">
                            <input type="hidden" name="backState" id="backState" />
                            <input type="text" name="sendRemark" id="sendRemark" class="form-control workTheme" data-size="small"/>
                        </div>
                    </div>
                    <div class="form-group col-sm-12">
                        <label class="col-sm-3 control-label entering-pd" style="color: red">不通过理由&nbsp;&nbsp;：</label>
                        <div class="col-sm-6">
                            <input name="txtReason" type="text" class="form-control workTheme" data-size="small">
                        </div>
                    </div>
                    <!--按钮-->
                    <div class="col-sm-12 entering-bt" style="justify-content: center;margin-top: 10px">
                        <button type="button" id="approveBtn" class="btn btn-sm btn-info mr20" onclick="auditPass('同意',21)">通过
                        </button>
                        <button type="button" id="approveBackBtn" class="btn btn-sm btn-info mr20" onclick="toAuditPassTwoBack()">通过并再退
                        </button>
                        <button type="button" id="resendBtn" style="display:none;" class="btn btn-sm btn-info mr20" onclick="reorderto()">重新派单
                        </button>
                        <button type="button" id="rejectBtn" class="btn btn-sm btn-success mr20" onclick="passOrNoPass('不同意',22)">不通过
                        </button>
                        <button type="button" class="btn btn-sm btn-warning" onclick="closeItem()">关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/ajax/libs/bootstrap-switch/bootstrap-switch.min.js}"></script>
<script>
    //回访记录
    function callbackRecord() {
        let wfId = [[${workFormBase.pkId}]];
        var url = '/system/twfJudge/judgeList/'+wfId;
        var title = '回访记录';
        var width = "400px";
        var options = {
            url: url,
            title: title,
            width: width
        }
        popupDialog(options);
    }

    //操作记录
    function operatingRecord() {
        let wfId = [[${workFormBase.pkId}]];
        var url = '/system/workForm/workFormLog?pkId='+wfId;
        var title = '操作记录';
        var height = "850px";
        var width = "600px";
        var options = {
            url: url,
            title: title,
            height: height,
            width: width
        }
        popupDialog(options);
    }

    var prefix = "/system/mTelWF";

    function passOrNoPass(sendRemark, backState) {
        $('#sendRemark').val(sendRemark);
        $('#backState').val(backState);
        if (backState == 22 && $('input[name=txtReason]').val().length == 0){
            $.modal.msgWarning("请输入不通过理由");
            return
        }
        if ($.validate.form()) {
            var data = $('#form-user-add').serializeArray();
            $.operate.saveTab(prefix + "/forShow/treturnReasonJson", data, refreshNotHandleList);
        }
    }

    //审核通过
    function auditPass(sendRemark, backState) {
        $('#sendRemark').val(sendRemark);
        $('#backState').val(backState);
        if ($.validate.form()) {
            var data = $('#form-user-add').serializeArray();
            var url = prefix + "/forShow/treturnReasonJson";
            var config = {
                url: url,
                type: "post",
                dataType: "json",
                data: data,
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍候...");
                    $('#approveBtn').attr('disabled',true);
                },
                success: function (result) {
                    $.modal.msgSuccess(result.msg);
                    $.modal.closeLoading();
                    $('#approveBtn').hide();
                    $('#rejectBtn').hide();
                    $('#resendBtn').show();
                    $('#approveBtn').attr('disabled',false);
                    refreshNotHandleList();
                }
            };
            $.ajax(config);
        }
    }

    //再退理由编辑弹框
    function toAuditPassTwoBack() {
        $('#sendRemarkTwo').val($('#sendRemarkTwoHidden').val());
        layer.open({
            type: 1,
            area: ['500px', '300px'],
            fix: false,
            maxmin: false,
            shade: 0.3,
            skin: 'demo-class',
            title: '编辑再次退回理由',
            content: $('#againBack'),
            btn: ['确定', '关闭'],
            // 弹层外区域关闭
            shadeClose: false,
            yes: function(index, layero) {
                if($.validate.form('formDialog')) {
                    auditPassTwoBack('同意',21);
                    layer.close(index);
                }
            },
            cancel: function(index) {
                return true;
            }
        });
    }

    function auditPassTwoBack(sendRemark, backState) {
        $('#sendRemark').val(sendRemark);
        $('#backState').val(backState);
        if ($.validate.form()) {
            var data = $('#form-user-add').serializeArray();
            //再退理由
            var backRemark = $('#sendRemarkTwo').val();
            data.push({name:"backRemark", value:backRemark});
            var url = prefix + "/forShow/treturnPassTwoBackJson";
            var config = {
                url: url,
                type: "post",
                dataType: "json",
                data: data,
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍候...");
                    $('#approveBtn').attr('disabled',true);
                },
                success: function (result) {
                    $.modal.closeLoading();
                    if(result.code == 470) {
                        $.modal.alert(result.msg);
                        return;
                    }
                    $.modal.msgSuccess(result.msg);
                    $('#approveBtn').hide();
                    $('#rejectBtn').hide();
                    $('#resendBtn').show();
                    $('#approveBtn').attr('disabled',false);
                    refreshNotHandleList();
                }
            };
            $.ajax(config);
        }
    }

    // 刷新下级退回-待处理列表
    function refreshNotHandleList() {
        var navFrame = $('.NAP_iframe[data-id="/system/cmnTab/twfCSonBackListS"]', parent.document).contents().find('#navFrame')[0];
        navFrame.contentWindow.$.table.refresh();
    }

    function proposed() {
        let pkId = $('#pkId').val();
        var url = send + "/proposed/" + pkId;
        var width = '80%';
        $.modal.open('拟办部门', url, width);
    }

    //跳到重新派单页面
    function reorderto(){
        var wfId = [[${workFormBase.pkId}]];
        var sbId = $('#pkId').val();
        var telId = $('#getDealPk').val();
        // var url = prefix + "/cmnFile/sendBackList/"+wfId; //这个地址查询结果不对
        var url = "system/mTelWF/rCity/sendBackList?wfId="+wfId+"&telId="+telId+"&sbId="+sbId+"&resendType=1";
        var width = '90%';
        var height = '90%';
        var config = {
            title: '承办部门',
            width: width,
            height : height,
            url: url,
            btn:['关闭'],
            skin: 'layui-layer-gray',
            yes: function (index, layero) {
                $.modal.close(index);
            }
        };
        $.modal.openOptions(config);
    }

    //派单记录
    function operationSendBackRecord(){
        var wfId = $('#wfId').val();
        var url = '/system/lookup/simulacrumList/' + wfId;
        var title = '派单记录';
        var width = "80%";
        var options = {
            url: url,
            title: title,
            width: width,
            skin: 'layui-layer-gray',
            btn: ['关闭'],
            yes: function (index, layero) {
                $.modal.close(index);
            }
        }
        $.modal.openOptions(options);
    }

    $("#formDialog").validate({
        focusCleanup: true
    });

    //是否开启短信通知
    $('[name="smsInform"]').bootstrapSwitch({
        onText: "是",
        offText: "否",
        onColor: "success",
        offColor: "info",
        size: "mini",
        radioAllOff:true,
        onSwitchChange: function (event, state) {
            if (state === true) {
                $("[name='isOpenThis']").val(1);
            } else {
                $("[name='isOpenThis']").val(0);
            }
        }
    });
</script>
</body>
<div id="againBack" style="display: none;">
    <div class="col-sm-12" style="margin: 20px 0;padding: 10px 0">
        <form id="formDialog">
            <div class="form-group col-sm-12">
                <label class="col-xs-2 control-label is-required" style="padding-top: 7px; padding-left: 0;padding-right: 0; margin-bottom: 0; text-align: right;">再退理由：</label>
                <div class="col-xs-10">
                    <textarea id="sendRemarkTwo" name="sendRemarkTwo" maxlength="3500" class="form-control workRemark" required
                              rows="5"></textarea>
                </div>
            </div>
        </form>
        <input type="hidden" id="sendRemarkTwoHidden" th:value="${sendBackEty.backRemark}" />
    </div>
</div>
</html>
